<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file">
  <script>
    //1.http并发 blob上传   /post
    //2.blob上传之后 发送merge请求  /merge
  function request({
    url,
    method = 'POST',
    data,
    headers = {},
    requestList   //文件列表

  }) {
    return new Promise(resolve =>{
      const xhr = new XMLHttpRequest();   //js ajax
      xhr.open(method,url);    //请求
      Object.keys(headers).forEach(key=>
        xhr.setRequestHeader(key,headers[key])   //请i求家头信息
      );
      xhr.send(data);  
      xhr.onload = e => {
        resolve({
          data:e.target.response
        })
      }
    })
  }
  const mergeRequest = async () => {
    await request({
      url:'http://localhost:3001/merge',
      headers:{
        "content-type":"application/json"
      }
    });
    alert('上传成功')
  }
  document
    .getElementById('file')
    .addEventListener('change', async (event) => {
      const file = event.target.files[0]; //es6 文件对象
      console.log(file);
      const file_name = file.name.split('.')[0];
      // console.log(file_name);
      //console.log(Object.prototype.toString.call(file));//[object File]
      //console.log(Object.prototype.toString.call(file.slice(0, 102400))); //array slice 
      let cur = 0, size = 0.5*1024*1024; //1M
      const fileChunkList = []; //blob 数组
      while(cur < file.size) {
        fileChunkList.push({
          // cur start offset  end 
          file: file.slice(cur, cur + size)
        });
        cur += size;
      }
      // console.log(fileChunkList);
      const requestList = fileChunkList.map(({file},index)=>{
        const formData = new FormData();
        formData.append("chunk",file);
        formData.append("filename",`${file_name}-${index}`);
        return {
          formData
        };
      }).map(async ({formData})=> request({
        url:'http://localhost:3000',
        data:formData
      }))
      await Promise.all(requestList)
      // console.log(requestList)
      await mergeRequest();
    })
  </script>
</body>
</html>